<template>
  <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(item,index) of banlist" :key="index">
      <img :src="item.url" class="swiperimg" />
    </swiper-slide>

    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
<!--    <div class="swiper-button-prev" slot="button-prev"></div>-->
<!--    <div class="swiper-button-next" slot="button-next"></div>-->
    <div class="swiper-scrollbar"   slot="scrollbar"></div>
  </swiper>
</template>

<script>
// const imgurl = require('../../../assets/images/22.jpg')
export default {
  name: 'HomeSwipe',
  props: {
    banlist: Array
  },
  data () {
    return {
      notNextTick: true,
      swiperOption: {
        // swiper options 所有的配置同swiper官方api配置
        autoplay: 3000,
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        scrollbar: '.swiper-scrollbar',
        mousewheelControl: true,
        observeParents: true,
        // if you need use plugins in the swiper, you can config in here like this
        // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true
      }
    }
  }
  // computed: {
  //   swiper () {
  //     return this.$refs.mySwiper.swiper
  //   }
  // },
  // mounted () {
  //   console.log('this is current swiper instance object', this.swiper)
  //   this.swiper.slideTo(1, 1000, false)
  // }
}
</script>

<style lang="stylus" scoped>
  .swiper-wrapper
    padding-top 35%
    height 0
  .swiperimg
    width 100%;
    height 3rem
</style>
